<template>
    <div>
        <el-dialog
            title="添加角色"
            :visible.sync="isShow"
            center
            :show-close="false"
        >
            <el-form
                :model="roleform"
                :rules="rules"
                label-position="right"
                label-width="100px"
                ref="roleform"
            >
                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="roleform.rolename"></el-input>
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-tree
                        :data="data.filter((item) => item.status == 1)"
                        default-expand-all
                        show-checkbox
                        node-key="id"
                        :props="defaultProps"
                        ref="tree"
                        :check-strictly="isCheck"
                    >
                    </el-tree>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch
                        v-model="roleform.status"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" v-if="isAdd"
                    >添 加</el-button
                >
                <el-button type="primary" @click="submit" v-else
                    >修 改</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    data() {
        return {
            //树形控件是否父子关联
            isCheck: false,
            //表单的验证规则
            rules: {
                rolename: [
                    {
                        required: true,
                        message: "请输入角色名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 6,
                        message: "长度在 2 到 6 个字符",
                        trigger: "blur",
                    },
                ],
            },
            defaultProps: {
                children: "children",
                label: "title",
            },
        };
    },
    props: ["isDialog", "isAdd"],
    methods: {
        ...Vuex.mapMutations({
            //设置一条数据 也就是设置弹框的数据
            setroleinfo: "role/setroleinfo",
        }),

        ...Vuex.mapActions({
            getlist: "role/rolelist_a", //获取角色列表 接口
            roleadd: "role/roleadd_a", //获取角色添加 接口
            roleedit: "role/roleedit_a", //获取角色添加 接口
        }),
        //点击取消 弹框消失
        cancel() {
            this.$emit("cancel", false);
            this.reset();
        },
        //reset 重置弹框表单的数据
        reset() {
            this.setroleinfo({
                rolename: "", //角色名称
                menus: "", //角色权限
                status: 1, //状态   1正常2禁用   number类型
            });
            this.isCheck = false;
        },

        //点击角色类型 取消上级角色
        noPid(i) {
            this.roleform.pid = i;
        },
        //点击添加或修改按钮提交
        submit() {
            //通过验证器判断是否符合rules规则
            this.$refs.roleform.validate((vaild) => {
                if (vaild) {
                    let menus = this.$refs.tree
                        .getCheckedKeys()
                        .concat(-1, this.$refs.tree.getHalfCheckedKeys())
                        .join();
                    this.setroleinfo({ ...this.roleform, menus });
                    //vuex方法,需要去watch监听事件的变化
                    if (this.isAdd) {
                        this.roleadd(this.roleform);
                    } else {
                        this.roleedit(this.roleform);
                    }
                    // this.cancel()
                } else {
                    this.$message.error("输入有误");
                    this.reset();
                    return false;
                }
            });
        },
    },
    computed: {
        //获取角色列表
        ...Vuex.mapGetters({
            roleform: "role/getroleinfo",
            roleTitle: "role/getroleTitle",
            data: "menu/getMenulist",
        }),
        //接收传递来的prop属性，
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("cancel", false);
            },
        },
    },
    watch: {
        //监听输出的内容是否变化，list组件也会受影响
        roleTitle(val) {
            if (val.code == 200) {
                this.$message.success(val.msg);
                this.cancel();
            } else {
                this.$message.error(val.msg);
                this.reset();
            }
            this.getlist();
        },
        //监听树形控件的变化
        roleform(val) {
            if (val.menus != "") {
                this.isCheck = true;
                console.log(this.isCheck);
                // Vue 在更新 DOM 时是异步执行的,所以需要通过nextTick方法，等dom更新完成后，再操作树形控件
                this.$nextTick(() => {
                    let arr = val.menus.split(",");
                    // arr.splice(arr.indexOf('-1'))
                    this.$refs.tree.setCheckedKeys(arr);
                    console.log(this.isCheck);
                    this.isCheck = false;
                });
            }
        },
    },
    mounted() {
        //获取角色列表
        this.getlist();
    },
};
</script>

<style scoped></style>
